<template>
    <a-drawer :destroyOnClose="true" :title="title" placement="right" :closable="true" :visible="visible"
        :maskClosable="true" :width="1000" @close="cancel">
        <a-spin :spinning="confirmLoading">
            <div class="table-page-search-wrapper">
                <LForm ref="oldUserActiveForm" @onClick="emitClickHandler" @onChange="emitChangeHandler"
                    :formAttributes="formAttributes" :mostColumns="mostColumns" :labelCol="labelCol"
                    @changeEventHandler="changeEventHandler" :wrapperCol="wrapperCol"></LForm>
                <br /><br />
                <div v-show="isShow">
                    <div class="table-operator">
                        <a-button shape="round" size="small" type="primary" icon="plus"
                            @click="emitClickHandler()">添加人员</a-button>
                    </div>
                    <LTable :scroll="{ y: 450 }" ref="KhyCouponSchemeUserList" size="middle" rowKey="keyId"
                        :columns="columns" axiosUrl="/KhyCouponSchemeUserController/page" :showPagination="true"
                        :showQueryForm="true" :initQuery="initQuery" dictCodes="19UUtiqqqq">
                        <span slot="action" slot-scope="text, record">
                            <a-popconfirm title="确定删除吗?" @confirm="() => deleteRecord(record)">
                                <a>删除</a>
                            </a-popconfirm>
                        </span>
                    </LTable>
                </div>


            </div>
        </a-spin>

        <div class="drawer-bootom-button">
            <a-button shape="round" @click="cancel" style="margin-right:.8rem">取消</a-button>
            <a-button shape="round" type="primary" @click="handleOk">提交</a-button>
        </div>
        <oldUserActiveAddForm @addRecord="addRecord" ref="oldUserActiveAddForm"></oldUserActiveAddForm>
    </a-drawer>

</template>

<script>
import LDrawerForm from '@/components/lt/form/LDrawerForm'
import LForm from '@/components/lt/form/LForm'
import LTable from '@/components/lt/LTable'
import pick from 'lodash.pick'
import request from '@/utils/request'
import defaultSettings from '@/config/defaultSettings'
import oldUserActiveAddForm from './oldUserActiveAddForm'
export default {
    name: 'oldUserActiveForm',
    components: {
        LDrawerForm, oldUserActiveAddForm, LForm, LTable
    },
    props: {
        mostColumns: {
            type: Number,
            default: 1
        },
        labelCol: {
            type: Object,
            default: function () {
                return {
                    sm: {
                        span: 6
                    }
                }
            }
        },
        wrapperCol: {
            type: Object,
            default: function () {
                return {
                    sm: {
                        span: 18
                    }
                }
            }
        },

    },
    data() {
        return {
            title: '详情',
            visible: false,
            isShow: false,
            confirmLoading: false,
            initQuery: [{ field: 'schemeId', val: '-112' }],
            model: {},
            formAttributes: {
                type: '',//collapse,tabs
                formItems: [
                    {
                        title: '标签一',
                        columns: 1,
                        fields: [
                            { field: 'couponName', label: '优惠券名称', component: 'input', rules: [{ required: true, message: '组织不能为空' }] },
                            { field: 'endDate', label: '截止日期', component: 'date', rules: [{ required: true, message: '不能为空' }] },
                            { field: 'couponType', label: '优惠券类型', component: 'select', rules: [{ required: true, message: '不能为空' }], dictCode: defaultSettings.数据字典.优惠卷类型 },
                            { field: 'couponValue', label: '优惠金额', component: 'input', rules: [{ required: true, message: '不能为空' }] },
                            { field: 'perCount', label: '单人发放数量', component: 'inputNumber', rules: [{ required: true, message: '不能为空' }] },
                            { field: 'useSet', label: '是否启用', component: 'select', rules: [{ required: true, message: '不能为空' }], dictCode: defaultSettings.数据字典.是否 },
                            { field: 'remarksCount', label: '备注', component: 'textarea', rules: [{ required: false, message: '不能为空' }] },
                            { field: 'applyType', label: '推送用户', component: 'radio', options: [{ label: '全体用户', value: '0' }, { label: '指定用户', value: '1' }], initialValue: '0' },

                        ]
                    },
                ]

            },
            queryFormAttributes: {},
            columns: [
                {
                    title: '序号',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: "center",
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },

                {
                    title: '用户手机号',
                    dataIndex: 'userNo',
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    width: '120px',
                    scopedSlots: { customRender: 'action' }
                }
            ],


        }
    },
    methods: {

        edit(record) {
            this.visible = true;
            this.model = Object.assign({}, record);
            if (this.model["keyId"] && this.model["applyType"] == '1') {
                this.initQuery = [{ field: 'schemeId', val: this.model["keyId"] }]
            } else {
                this.initQuery = [{ field: 'schemeId', val: "-56879" }]
            }
            if (this.model["applyType"] == "1") {
                this.isShow = true
            } else {
                this.isShow = false
            }
            this.$nextTick(() => {
                //'profilePicture',
                this.$refs.oldUserActiveForm.getForm().setFieldsValue(pick(this.model, 'couponName', 'endDate', 'couponType', 'couponValue', 'perCount', 'remarksCount', 'useSet', 'applyType'))
            })
        },
        handleOk() {
            const that = this;
            let recordList = that.$refs["KhyCouponSchemeUserList"].localDataSource
            this.$refs.oldUserActiveForm.getForm().validateFields((err, values) => {
                if (!err) {
                    that.confirmLoading = true
                    let formData = Object.assign(this.model, values);
                    formData.schemeType = "2"
                    let data = { formData: formData, recordList: recordList }
                    request({ url: '/KhyCouponSchemeController/saveData', method: 'post', data: data }).then((res) => {
                        if (res.success) {
                            that.close()
                            that.$message.success(res.message);
                        } else {
                            that.$message.warning(res.message);
                        }
                    }).finally(() => {
                        that.confirmLoading = false;

                    })

                }
            })
        },
        cancel() {
            this.visible = false
        },
        handleCancel() {
            this.visible = false
        },
        close() {
            this.$emit('close');
            this.visible = false;
        },
        /**
         * 表单内容发生变化
         */
        changeEventHandler(changeItem) {
            console.log(changeItem)
            if (changeItem.hasOwnProperty('applyType')) {
                if (changeItem.applyType == "1") {
                    this.isShow = true
                } else {
                    this.isShow = false
                }
            }

        },
        emitChangeHandler(changeItem) {
            this.$emit('handlerChange', changeItem);

        },
        emitClickHandler(field, form) {
            this.$refs['oldUserActiveAddForm'].edit()
        },
        addRecord(dataSource) {
            this.$refs["KhyCouponSchemeUserList"].localPagination = false
            if (dataSource.length > 0) {
                this.$refs["KhyCouponSchemeUserList"].localDataSource = dataSource
            }
            this.$refs["KhyCouponSchemeUserList"].refreshData()
        },
        deleteRecord(record) {
            let that = this
            that.$refs["KhyCouponSchemeUserList"].localPagination = false
            that.$refs["KhyCouponSchemeUserList"].localDataSource = that.$refs["KhyCouponSchemeUserList"].localDataSource.filter(item => {
                return item.keyId != record.keyId;
            })



        },
    },
    created() {

    },
}
</script>
<style  scoped>
  .drawer-bootom-button {
    position: absolute;
    z-index: 999999;
    bottom: 0;
    width: 100%;
    /* border-top: 1px solid #e8e8e8; */
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }

</style>